<!DOCTYPE html>
<html lang="CN-ch">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>宝可梦</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            var a = 0;
            var flag1;
            var flag2 = 0; 
            var index = 0;
            //0 水 ；1 火 ；2 草
            $('#hideButton1').click(function(){
                //水
                if(flag1 == 0 ){
                    if(flag2 == 0){
                        if(a < 3){
                            a = a + 1;
                            $('#human').attr('src', './image/duizhan' + flag1 + flag2 + index++ +'.png');
                            setTimeout(() => {
                                $('#human').attr('src', './image/duizhan' + flag1 + flag2 + index++ + '.png');
                            }, 1000);
                            if(a<3){setTimeout(() => {
                                $('#human').attr('src', './image/duizhan' + flag1 + flag2 + index++ + '.png');
                            }, 2000);}
                            if(a < 3){
                                setTimeout(() => {
                                    $('#human').attr('src', './image/duizhan' + flag1 + flag2 + index++ + '.png');
                                }, 3000);
                                if(a<2){
                                    setTimeout(() => {
                                    $('#human').attr('src', './image/duizhan' + flag1 + flag2 + index++ + '.png');
                                }, 4000);}
                            }
                            
                            if(a == 3){
                                setTimeout(() => {
                                    a = 0;
                                flag2 = flag2 + 1 ;
                                $('#mytc').attr('src', './image/pkmtc' + flag2 + '.png');
                                document.getElementById("mytc").style.display="block";
                                }, 2000);
                            }
                            
                        } else {
                            a = 0;
                            flag2 = flag2 + 1 ;
                            $('#mytc').attr('src', './image/pkmtc' + flag2 + '.png');
                            document.getElementById("mytc").style.display="block";
                        }
                    }
                    if(flag2 == 1){
                        if(a < 2){
                            a = a + 1;
                            $('#human').attr('src', './image/duizhan' + flag1 + flag2 + '.png');
                        } else {
                            a = 0;
                            flag2 = flag2 + 1;
                            $('#mytc').attr('src', './image/pkmtc' + flag2 + '.png');
                            document.getElementById("mytc").style.display="block";
                        }
                    }
                    if(flag2 == 2){
                        if(a < 3){
                            a = a + 1;
                            $('#human').attr('src', './image/duizhan' + flag1 + flag2 + '.png');
                        } else {
                            a = 0;
                            
                            document.getElementById("mytc1").style.display="block";
                        }
                    }
                    
                }
                //火
                if(flag1 == 1){
                    if(flag2 == 0){
                        if(a < 3){
                            a = a + 1;
                            $('#human').attr('src', './image/duizhan' + flag1 + flag2 + '.png');
                        } else {
                            a = 0;
                            document.getElementById("mytc1").style.display="block";
                        }
                    }
                    if(flag2 == 1){
                        if(a < 3){
                            a = a + 1;
                            $('#human').attr('src', './image/duizhan' + flag1 + flag2 + '.png');
                        } else {
                            a = 0;
                            flag2 = flag2 + 1;
                            $('#mytc').attr('src', './image/pkmtc' + flag2 + '.png');
                            document.getElementById("mytc").style.display="block";
                        }
                    }
                    if(flag2 == 2){
                        if(a < 2){
                            a = a + 1;
                            $('#human').attr('src', './image/duizhan' + flag1 + flag2 + '.png');
                        } else {
                            a = 0;
                            flag2 = flag2 + 1;
                            $('#mytc').attr('src', './image/pkmtc' + flag2 + '.png');
                            document.getElementById("mytc").style.display="block";
                        }
                    }

                }
                //草
                if(flag1 == 2){
                    if(flag2 == 0){
                        if(a < 2){
                            a = a + 1;
                            $('#human').attr('src', './image/duizhan' + flag1 + flag2 + '.png');
                        } else {
                            a = 0;
                            flag2 = flag2 + 1;
                            $('#mytc').attr('src', './image/pkmtc' + flag2 + '.png');
                            document.getElementById("mytc").style.display="block";
                        }
                    }
                    if(flag2 == 1){
                        if(a < 3){
                            a = a + 1;
                            $('#human').attr('src', './image/duizhan' + flag1 + flag2 + '.png');
                        } else {
                            a = 0;
                            document.getElementById("mytc1").style.display="block";;
                        }
                    }
                    if(flag2 == 2){
                        if(a < 3){
                            a = a + 1;
                            $('#human').attr('src', './image/duizhan' + flag1 + flag2 + '.png');
                        } else {
                            a = 0;
                            flag2 = flag2+1;
                            $('#mytc').attr('src', './image/pkmtc' + flag2 + '.png');
                            document.getElementById("mytc").style.display="block";
                        }
                    }

                }
                //$('#mytc').attr('src', './image/cuiwan' + a + '.png'); 
                //$('#baimg').attr('src', './image/cuiwan' + flag2 + '.png');
                
            });

            $('#hideButton2').click(function(){
                flag1 = 0;
                $('#mytc').hide();
                $('#human').attr('src', './image/duizhan' + flag1 +flag2 +index+ '.png');
            });
            $('#hideButton3').click(function(){
                flag1 = 1;
                $('#mytc').hide();
                $('#human').attr('src', './image/duizhan' + flag1 +flag2 +index+ '.png');
            });
            $('#hideButton4').click(function(){
                flag1 = 2;
                $('#mytc').hide();
                $('#human').attr('src', './image/duizhan' + flag1 + flag2 +index+ '.png');
            });
            $('#hideButton5').click(function(){


            });
        });
    </script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .container{
            max-width: 99%;
            position: relative;
            margin: 0 auto;
            text-align: center;
            height: 100vh;
            overflow: hidden;
        }
        .bg{
            position: relative;
            margin: auto;
            width: fit-content;
            overflow: hidden;
        }
        .bgimg{
            max-width: 100%;
            max-height: 100%;
            height: 100vh;
        }

        .tc{
            position: absolute;
            background-image: url("./image/pkmtc1.png");
            background-size: cover;
            top: 20%;
            left: 20%;
            display: flex;
            border-radius: 10px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            z-index: 1;
            animation: zoomIn 0.5s forwards;
            background-repeat: no-repeat;
            width: 60%;
            height: 60%;
        }
        .tc1{
            position: absolute;
            background-image: url("./image/shiwang.png");
            background-size: cover;
            top: 20%;
            left: 20%;
            display: none;
            border-radius: 10px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            z-index: 1;
            animation: zoomIn 0.5s forwards;
            background-repeat: no-repeat;
            width: 60%;
            height: 60%;
        }

        @keyframes zoomIn {
            from {
              transform: scale(0.5);
            }
            to {
              transform: scale(1);
            }
          }
        #hideButton1{
			position: absolute;
			top: 60%;
			left: 60%;
			width: 40%;
			height: 40%;
			background-color: transparent; /* 设置按钮背景为透明 */
			border: none; /* 去掉按钮边框 */
			cursor: pointer; 

        }
        #hideButton2{
			position: absolute;
			top: 45%;
			left: 0%;
			width: 33%;
			height: 50%;
			background-color: transparent; /* 设置按钮背景为透明 */
			border: none; /* 去掉按钮边框 */
			cursor: pointer; 

        }
        #hideButton3{
			position: absolute;
			top: 45%;
			left: 33%;
			width: 33%;
			height: 50%;
			background-color: transparent; /* 设置按钮背景为透明 */
			border: none; /* 去掉按钮边框 */
			cursor: pointer; 

        }
        #hideButton4{
			position: absolute;
			top: 45%;
			left: 66%;
			width: 33%;
			height: 50%;
			background-color: transparent; /* 设置按钮背景为透明 */
			border: none; /* 去掉按钮边框 */
			cursor: pointer; 

        }
        #hideButton5{
			position: absolute;
			top: 45%;
			left: 33%;
			width: 33%;
			height: 50%;
			background-color: transparent; /* 设置按钮背景为透明 */
			border: none; /* 去掉按钮边框 */
			cursor: pointer; 

        }
    </style>
</head>
<body>
    <div class="container">
        <div class="bg">
            <button id="hideButton1"></button>
            <img class="bgimg" src="./image/Map001.png" id="human">
            <div class="tc" id="mytc">
                <p></p>
                <button id="hideButton2"></button>
                <button id="hideButton3"></button>
                <button id="hideButton4"></button>
            </div>
            <div class="tc1" id="mytc1">
                <button id="hideButton5"></button>
            </div>
        </div>
    </div>
</body>
</html>
